<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="./CSS/phone_control.css" />
<link rel="stylesheet" type="text/css" href="./CSS/easyui.css" />
<link rel="stylesheet" type="text/css" href="./CSS/icon.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

<script>
var iscall =false;
$(function(){
	$('#tt').datagrid({
	   url:'datagrid_data1.json',  
	   width:305,
		height:200,	
		singleSelect:true,		   
	  columns:[[   
			  {field:'name',title:'Name',colspan:2,width:100},   
			  {field:'code',title:'Number',width:100},   
			  {field:'opt' ,title:'Action',width:100,align:'center',
			  formatter:function(value,row,index){   
				return '<a href="#" onclick="deleterow('+index+')">删除</a>';
			  }   
			  }
	  ]] ,

      onDblClickRow: function(index,row){
	          
	          $(this).datagrid('clearSelections');
             }	  
	});
	
	
	
	$(".key").click(function(){
	
	
	     $("#pnt1").val($("#pnt1").val()+$(this).val());
		 
		if(iscall){ 
		      alert($(this).val());
			    /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/phone_control.cgi,		 
                       data: "call="+$(this).val(),		  
                       success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
			  
			  }
	
	
	});
});

function updateActions(){
	var rowcount = $('#tt').datagrid('getRows').length;
	for(var i=0; i<rowcount; i++){
	   //   alert("updateRow: "+i);
		$('#tt').datagrid('updateRow',{
		 
			index:i,
			row:{opt:''}
		});
	}
}

function deleterow(index){  
	 //   alert(index);		  
	   $.messager.confirm('Confirm','Are you sure?',function(r){   
		  if (r){   
		  $('#tt').datagrid('deleteRow', index); 
					 updateActions();						  
			 }   
			});   
			};
					
function insert(){
	
	  var num=$("#pnt1").val();
	  
	  $.messager.prompt('My Title', '输入姓名', function(r){
		if (r){
		$('#tt').datagrid('insertRow', {
		index: 0,
		row:{
			name:r,
			code:num
		}
	});			
		}
	});	
}		

function deletepn(){
	
	 $("#pnt1").val("");
	  
	  
}	

function backspace(){
	 var sv =$("#pnt1").val();
	 var sl=$("#pnt1").val().length;
	// alert(sl);
	 if(sl>=1){
	 // alert("ok");
	 $("#pnt1").val(sv.substr(0,sl-1));
	 
	 }
	  
	  
}

function call(){
	
	
	if(!iscall){
	     
		 
		 if($("#pnt1").val().length>1){
		 alert("call: "+$("#pnt1").val());
		     /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/phone_control.cgi,		 
                       data: "call="+$("#pnt1").val(),		  
                       success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
		 
		 }else{
		 var select = $('#tt').datagrid('getSelected');
	     if(select){
	        alert("call: "+select["code"]);
		       /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/phone_control.cgi,		 
                       data: "call="+select["code"],		  
                       success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
		    
			
			
			// $('#tt').unselectRow(0);
		    }else{
		       alert("请输入电话号码!");
		 }
		 }
		$("#second #call").css("background","url(./icons/IR_btn_num_red_2.png) no-repeat");
		
		$("#second #call").attr("value","挂机");
		iscall=true;
     }
	 else{
	     iscall=false;
	        /* $.ajax({		  
                       type: get,		  
                       url: http://xx.xxx.xx.xx/cgi-bin/phone_control.cgi,		 
                       data: "hangup="+"true",		  
                       success: function(msg){			 alert( "数据发送成功" + msg );		 
                       }		
              }); */
	   	$("#second #call").attr("value","摘机");
		$("#second #call").css("background","url(./icons/IR_btn_num_green_1.png) no-repeat");
	   
	   
	
	  
	 
	 }
	 
	  
}

function redial(){
	
	// $("#pnt1").val("");
	  alert("redial!");
	  
	  
}

function hungup(){
	
	// $("#pnt1").val("");
	 alert("hungup!");
	  
	  
}
			
</script>
</head>

<body>
<p id="text_area0">电话控制</p>
<div id="phone_control">
<div id="first"><input type="text" id="pnt1" value="13800138000" /></div>
<div id="second">
<table  style="padding:2px;">
<tr>
    <td><input name="one" class="key" type="button" value="1" /></td>
    <td><input name="two" class="key" type="button" value="2" /></td>
    <td><input name="three" class="key" type="button" value="3" /></td>
</tr>
<tr>
    <td><input name="four" class="key" type="button" value="4" /></td>
    <td><input name="five" class="key" type="button" value="5" /></td>
    <td><input name="six" class="key" type="button" value="6" /></td>
</tr>
<tr>
    <td><input name="seven" class="key" type="button" value="7" /></td>
    <td><input name="eight" class="key" type="button" value="8" /></td>
    <td><input name="nine" class="key" type="button" value="9" /></td>
</tr>
<tr>
    <td><input name="star" class="key" type="button" value="*" /></td>
    <td><input name="zero" class="key" type="button" value="0" /></td>
    <td><input name="sharp" class="key" type="button" value="#" /></td>
</tr>
<tr>
<td><input class="operation" type="button" value="添加" onclick="insert()" /></td>
<td><input class="operation" type="button" value="重拨" onclick="redial()" /></td>
<td><input class="operation" type="button" value="退格" onclick="backspace()" /></td>
</tr>
<tr>
  <th colspan="2"><input id="call" class="operation"   type="button" value="摘机" onclick="call()" /></th>
  <th><input id="delete" class="operation" type="button" value="清除" onclick="deletepn()" /></th>
</tr>
</table>
</div>
<div id="third">
    <h3>电话簿</h3>
  <table id="tt"></table>
</div>
</div>
</body>
</html>
